<template>
	<div>
		<h1 class="logo">CakeShop后台管理</h1>
		<el-row class="tac">
			<el-col>
				<el-menu unique-opened>
					<!-- <el-menu-item index="member" @click="jump('member')">
						<i class="el-icon-s-custom"></i>
						<span slot="title">人员管理</span>
						<i class="el-submenu__icon-arrow el-icon-caret-right"></i>
					</el-menu-item> -->
          <el-submenu index="memberManage">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="member" @click="jump('member')">
                <i class="el-icon-user"></i>
                <span>权限管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
              <el-menu-item index="memberInfo"  @click="jump('memberInfo')">
                <i class="el-icon-tickets"></i>
                <span>信息管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="indexClient">
            <template slot="title">
              <i class="el-icon-s-unfold"></i>
              <span>首页管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="rotation" @click="jump('rotation')">
                <i class="el-icon-picture"></i>
                <span>轮播管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="dataManage">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>数据管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="classify" @click="jump('classify')">
                <i class="el-icon-menu"></i>
                <span>分类管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
              <el-menu-item index="goods"  @click="jump('goods')">
                <i class="el-icon-s-goods"></i>
                <span>商品管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="orderManage">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="orders"  @click="jump('orders')">
                <i class="el-icon-s-order"></i>
                <span>订单管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
              <el-menu-item index="stock"  @click="jump('stock')">
                <i class="el-icon-folder-checked"></i>
                <span>库存管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
              <el-menu-item index="sales"  @click="jump('sales')">
                <i class="el-icon-folder-checked"></i>
                <span>销量管理</span>
                <i class="el-submenu__icon-arrow el-icon-caret-right"></i>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>


				</el-menu>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default{
		name:"navMenu",
		data(){
			return {
			}
		},
		methods:{
			jump(params){
				this.$router.push({path:`/home/${params}`})
			}
		}
	}
</script>

<style scoped>
  .el-menu li{
    color: #b6becd;
    background-color:#2e384b ;
  }
	.el-menu li span{
		display: inline-block;
		width: 100px;
		text-align: left;
	}
  .el-submenu span{
    color: #b6becd;
  }
  .el-menu .el-menu{
    padding: 0 0 0 10px;
  }
  .el-menu .el-menu li{
    background-color: #2c5780;
    font-size: 13px;
  }

</style>
